<template>
  <div>
    <!-- Header 头部区域 -->
    <div class="search-header">
      <!-- 后退图标 -->
      <van-icon name="arrow-left" color="white" size="18" class="goback" @click="backoff" />
      <!-- 搜索组件 -->
      <van-search
      v-fofo
      v-model.trim="kw"
      placeholder="请输入搜索关键词"
      background="#007BFF"
      shape="round"
      @input="inputFn"
      />
    </div>
     <!-- 搜索建议 -->
    <div class="sugg-list">
      <div class="sugg-item" v-for="(item, i) in suggestList" :key="i" v-html="lightFn(item,kw)"></div>
    </div>

  </div>
</template>

<script>
import { suggestListAPI } from '@/api/index.js'
export default {
  name: 'Search',
  data () {
    return {
      // 搜索关键词
      kw: '',
      timer: null, // 防抖定时器
      suggestList: []
    }
  },
  methods: {
    // 后退
    backoff () {
      this.$router.push({ path: '/layout/home' })
    },
    // 输入框-内容实时改变触发事件方法
    inputFn () {
      clearTimeout(this.timer)
      // 防抖：延时执行逻辑代码，事件再次触发，清除上一个定时器
      if (this.kw.length === 0) {
        this.suggestList = []
      } else {
        this.timer = setTimeout(async () => {
          const { data: res } = await suggestListAPI({
            search: this.kw
          })
          this.suggestList = res.data.options
          console.log(res)
        }, 300)
      }
    },
    // 专门处理关键字高亮
    lightFn (originStr, target) {
      // orginStr:原来字符串
      // target：关键字
      // 字符串。reolace() 替换第一个
      // 字符串。reolaceAll() 替换全部
      // 列如：“好同志，都是抢来的” 关键字是：‘好’
      // 返回值：替换后的完整字符串

      // 如果你要使用变量，作为正则的匹配条件,不能用语法糖简化写法
      const reg = new RegExp(target, 'ig') // i忽略大小写，g全局都匹配
      return originStr.replaceAll(reg, `<span style="color:red">${target}</span>`)
    }
  }
}
</script>

<style lang="less" scoped>
.search-header {
  height: 46px;
  display: flex;
  align-items: center;
  background-color: #007bff;
  overflow: hidden;
  // 后退按钮
  .goback {
    padding-left: 14px;
  }
  // 搜索组件
  .van-search {
    flex: 1;
  }
}
// 搜索联想关键字
.sugg-list {
  .sugg-item {
    padding: 0 15px;
    border-bottom: 1px solid #f8f8f8;
    font-size: 14px;
    line-height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
